<template>
  <div class="home">
    <block-loading :loading="blockLoading">
      <h2 class="title">🔥vue-vant-base🔥</h2>
      <p style="text-align: center">
        vue+vant 移动端快速开发架构(Vue2.0)
      </p>
      <div>
        <img src="@/assets/images/logo.png" width="150" height="150" alt />
      </div>
      <m-panel title="块级加载组件">
        <van-row type="flex" justify="center">
          <van-button @click="blockloadingTest">点击测试</van-button>
        </van-row>
      </m-panel>
      <m-panel title="图标">
        <van-row type="flex" justify="center" :gutter="2">
          <van-col>
            <van-icon size="30" name="chat-o" />
          </van-col>
          <van-col>
            <van-icon
              size="30"
              name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
            />
          </van-col>
        </van-row>
      </m-panel>
      <m-panel title="拖拽">
        <draggable
          tag="van-grid"
          :list="myArray"
          @end="onEndCallback"
          :disabled="false"
          :component-data="{
            props: { 'column-num': 3 }
          }"
        >
          <van-grid-item
            v-for="item in myArray"
            :key="item.id"
            icon="photo-o"
            :text="item.name"
          ></van-grid-item>
        </draggable>
      </m-panel>
      <m-panel title="主题颜色">
        <van-row type="flex" justify="center">
          <van-button style="margin: 10px">默认样式</van-button>
        </van-row>
      </m-panel>
      <m-panel title="svg">
        <van-row type="flex" justify="center" style="font-size: 30px">
          svg:
          <svg-icon iconClass="404"></svg-icon>
        </van-row>
      </m-panel>
      <m-panel title="scss全局变量颜色">
        <div class="theme">scss全局变量颜色</div>
      </m-panel>
      <m-panel title="图片上传">
        <van-row type="flex" justify="center" align="center">
          <van-uploader v-model="fileList" multiple></van-uploader>
          <van-button @click="uploadImage">上传</van-button>
        </van-row>
      </m-panel>
      <m-panel title="其他测试">
        <div style="text-align: center; line-height: 1.5em">
          <div>
            <!-- <router-link :to="{ name: 'WxTest' }">测试jssdk</router-link> -->
          </div>
          <div>
            <router-link
              :to="{ path: '/article/list', query: { plan: 'private' } }"
              >列表 demo</router-link
            >
          </div>
          <div>
            <router-link :to="{ name: 'map-demo' }">高德地图 demo</router-link>
          </div>
          <div>
            <router-link :to="{ name: 'test-jssdk' }">jssdk demo</router-link>
          </div>
          <div>
            <router-link :to="{ name: 'face' }">face demo</router-link>
          </div>
        </div>
      </m-panel>
    </block-loading>
  </div>
</template>

<script>
// @ is an alias to /src
import VueDraggable from 'vuedraggable'
import { formatArrToFormData } from '@/utils'
import $store from '@/store/index'
import $router from '@/router/index'
import $api from '@/api/index'
import { auth, getCode } from '@/utils/auth.js'
import * as mt from '@/store/modules/user/mutations-types'

export default {
  name: 'home',
  components: {
    draggable: VueDraggable
  },
  data () {
    return {
      fileList: [],
      value: 50,
      time: 30 * 60 * 60 * 1000,
      myArray: [
        { name: '1号彩笔', id: 1 },
        { name: '2号彩笔', id: 2 },
        { name: '3号彩笔', id: 3 },
        { name: '4号彩笔', id: 4 },
        { name: '5号彩笔', id: 5 },
        { name: '6号彩笔', id: 6 }
      ],
      blockLoading: false
    }
  },
  computed: {
    code () {
      return $store.getters['user/code'] || ''
    }
  },
  mounted () {
    if (!getCode()) {
      auth()
    }
    $store.dispatch('user/authorize')
  },
  methods: {
    onEndCallback (evt) {
      console.log(evt)
      console.log(this.myArray)
    },
    handleLogOut () {
      $store.dispatch('user/logout')
      $router.replace('/login')
    },
    async uploadImage () {
      const formData = new FormData()
      formData.append('id', '8888')
      const fileArr = this.fileList.map(item => item.file)
      // 此方法会改变原数组,console.log(formData)是看不到效果的必须在请求体里面才能看到
      formatArrToFormData(formData, 'images', fileArr)
      const result = await $api.test.uploadImage(formData)
      console.log(result)
    },
    blockloadingTest () {
      this.blockLoading = true
      setTimeout(() => {
        this.blockLoading = false
      }, 3000)
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  line-height: 80px;
  text-align: center;
  padding: 5px 10px;
}
.logo {
  width: 200px;
  height: 200px;
}
.theme {
  text-align: center;
  color: $common-color;
  margin: 10px 0px;
}
.title {
  font-size: 50px;
  text-align: center;
}
</style>
